<template>
    <div class="container">
        <div
            class="container_main"
            v-if="data.length > 0"
        >
            <div
                class="container_box"
                v-for="(item,index) in data"
                :key="index"
            >
                <!-- 单选 -->
                <div v-if="item.type == 2">
                    <div class="container_head">
                        <p class="container_head_title">{{ index + 1 }}.{{ item.title }}</p>
                        <p class="container_head_desc">
                            <span>单选</span>
                            <span
                                v-if="item.required == 1"
                                style="padding: 0 10px 0 10px"
                            >必填</span>
                            <span
                                style="padding: 0 10px 0 10px"
                                v-if="item.required == 0">选填</span>
                            <span>共{{ item.submit_count }}个提交</span>
                        </p>
                    </div>
                    <div class="container_mainer">
                        <div class="container_mainer_left">
                            <div>
                                <div class="main_head">
                                    <p
                                        :class=" item.isType == 0 ? 'main_head_column' : 'main_head_ricle' "
                                        @click=" item.isType = 0 "
                                    >柱状图</p>
                                    <p
                                        :class=" item.isType == 1 ? 'main_head_column' : 'main_head_ricle' "
                                        @click=" item.isType = 1 "
                                    >饼图</p>
                                </div>
                                <div class="echarts_type">
                                    <div
                                        class="echarts_clume"
                                        v-show="item.isType == 0"
                                    >
                                        <div
                                            :id="'echarts_clume' + index"
                                            class="echarts_cont"
                                            :ref=" 'echarts_clume' + index "
                                        />
                                    </div>
                                    <div
                                        class="echarts_ricle"
                                        v-show="item.isType == 1"
                                    >
                                        <div
                                            :id="'echarts_ricle' + index"
                                            class="echarts_ricle"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container_mainer_right">
                            <el-table
                                :data="item.option"
                                height="100%"
                                style="width: 100%;"
                                border
                            >
                                <el-table-column
                                    prop="title"
                                    label="选项"
                                    align="center"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                />
                                <el-table-column
                                    prop="submit_count"
                                    label="数据"
                                    align="center"
                                    show-overflow-tooltip
                                />
                                <el-table-column
                                    label="占比"
                                    align="center"
                                    show-overflow-tooltip
                                >
                                    <template slot-scope="scope">
                                        {{ scope.row.submit_count / item.submit_count | setCount }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <!-- /单选 -->

                <!-- 多选 -->
                <div v-if="item.type == 3">
                    <div class="container_head">
                        <p class="container_head_title">{{ index + 1 }}.{{ item.title }}</p>
                        <p class="container_head_desc">
                            <span>多选</span>
                            <span v-if="item.required == 1">必填</span>
                            <span
                                style="padding: 0 10px 0 1px"
                                v-if="item.required == 0">选填</span>
                            <span>共{{ item.submit_count }}个提交</span>
                        </p>
                    </div>
                    <div class="container_mainer">
                        <div class="container_mainer_left">
                            <div>
                                <div class="main_head">
                                    <p
                                        :class=" item.isType == 0 ? 'main_head_column' : 'main_head_ricle' "
                                        @click=" item.isType = 0 "
                                    >柱状图</p>
                                    <p
                                        :class=" item.isType == 1 ? 'main_head_column' : 'main_head_ricle' "
                                        @click=" item.isType = 1 "
                                    >饼图</p>
                                </div>
                                <div class="echarts_type">
                                    <div
                                        class="echarts_clume"
                                        v-show="item.isType == 0"
                                    >
                                        <div
                                            :id="'echarts_clume' + index"
                                            class="echarts_cont"
                                            :ref=" 'echarts_clume' + index "
                                        />
                                    </div>
                                    <div
                                        class="echarts_ricle"
                                        v-show="item.isType == 1"
                                    >
                                        <div
                                            :id="'echarts_ricle' + index"
                                            class="echarts_ricle"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container_mainer_right">
                            <el-table
                                :data="item.option"
                                height="100%"
                                style="width: 100%;"
                                border
                            >
                                <el-table-column
                                    prop="title"
                                    label="选项"
                                    align="center"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                />
                                <el-table-column
                                    prop="submit_count"
                                    label="数据"
                                    align="center"
                                    show-overflow-tooltip
                                />
                                <el-table-column
                                    label="占比"
                                    align="center"
                                    show-overflow-tooltip
                                >
                                    <template slot-scope="scope">
                                        {{ scope.row.submit_count / item.submit_count | setCount }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <!-- /多选 -->
            </div>
        </div>
        <div
            class="empty-wrap"
            v-else
        >
            <div class="empty-img" />
            <p class="empty-text">
                还没有提交数据哦~
            </p>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts';
export default {
    data() {
        return {
            form_no: '',
            data: []
        };
    },
    filters: {
        setCount (val) {
            if (val == 0) {
                return '0%';
            } else {
                return (val * 100).toFixed(2) + '%';
            }
        }
    },
    mounted () {
        if (window.history && window.history.pushState && this.prevPage !== '') {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        this.getUrlParam();
        this.setHeader();
        this.tableData();
    },
    destroyed(){
        if (this.prevPage !== '') {
            window.removeEventListener('popstate', this.goBack, false);
        }
    },
    methods: {
        /**
        * 设置表单header
        */
        setHeader() {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台"
            },
            {
                title: '自定义表单'
            },
            {
                title: "查看统计"
            }]
            );
        },

        /**
         * 获取图标统计信息
         */
        tableData (){
            let self = this;

            self.$post('/student/custom_form_data%5Cget_statistic',{
                form_no: self.form_no,
            },resp =>{
                if(resp.code == 1){
                    resp.data.list.map(item=>{
                        item.isType = 0;
                    });
                    self.data = resp.data.list;
                    self.$nextTick(()=> {
                        self.data.map((item,index)=>{
                            self.drawLine(item,index);
                        });
                    }, 100);

                }
            });
        },

        /**
         * 图表设置
         */
        drawLine(item,index){
            let myChart = this.$echarts.init(document.getElementById('echarts_clume' + index));
            let myChatClire = this.$echarts.init(document.getElementById('echarts_ricle' + index));
            let titleList = [];
            let countList = [];

            item.option.map(itm=>{
                titleList.unshift(itm.title);
                countList.unshift(itm.submit_count);
            });

            myChart.setOption({
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '35%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    show: false
                },
                yAxis: {
                    type: 'category',
                    data: titleList
                },
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            normal:{
                                color: function (params){
                                    var colorList = ['#20A0FF','#F5A623','#50E3C2','#66ac52','#B95AFF','#855AFF','#5AE7FF','#B2FF5A'];

                                    return colorList[params.dataIndex];
                                }
                            },
                        },
                        data: countList,
                    },
                ]
            });

            let list = [];

            titleList.map((item,index)=>{
                list.push({
                    value: countList[index],
                    name: titleList[index]
                });
            });

            myChatClire.setOption({
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series : [
                    {
                        name: '统计数据',
                        type: 'pie',
                        radius : '60%',
                        center: ['50%', '40%'],
                        data: list,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },

        /**
         * 监听返回事件
         */
        goBack () {
            if (this.prevPage !== '') {
                this.$router.replace({
                    name: 'studentForm',
                });
            }
        },


        /**
         * 获取url参数
         */
        getUrlParam () {
            let query = this.$route.query;

            if (query.form_no !== undefined) {
                this.form_no = query.form_no;
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>
<style lang="less" scoped>
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .container_main {
            background: #ffffff;
            flex: 1;
            padding: 29px 60px 62px 60px;
            .container_box {
                min-width: 1000px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                margin-bottom: 62px;
                .container_head {
                    display: flex;
                    justify-content: space-between;
                    height: 20px;
                    align-items: center;
                    .container_head_desc {
                        color: #88909C;
                        display: flex;
                        height: 20px;
                        align-items: center;
                    }
                }
                .container_mainer {
                    width: 100%;
                    min-width: 1000px;
                    display: flex;
                    margin-top: 10px;
                    min-height: 275px;
                    justify-content: space-between;
                    .container_mainer_left {
                        width: 520px;
                        height: 275px;
                        min-height: 275px;
                        background:rgba(255,255,255,1);
                        box-shadow:0px -1px 0px 0px rgba(244,244,244,1);
                        border:1px solid rgba(232,232,232,1);
                        .main_head {
                            width: 100%;
                            height: 44px;
                            display: flex;
                            align-items: center;
                            background: #fafafa;
                            padding-left: 20px;
                            .main_head_column {
                                color: #000000;
                                font-size: 14px;
                                font-weight: bold;
                                margin-right: 14px;
                                cursor: pointer;
                            }
                            .main_head_ricle {
                                color: #88909C;
                                font-size: 14px;
                                margin-right: 14px;
                                cursor: pointer;
                            }
                        }
                        .echarts_type, .echarts_clume, .echarts_cont,.echarts_ricle {
                            width: 500px;
                            height: 300px;
                        }
                    }
                    .container_mainer_right {
                        width: 100%;
                        min-width: 460px;
                        margin-left: 30px;
                        min-height: 175px;
                    }
                }
            }
        }
    }
    .empty-wrap {
        text-align: center;
        margin-top: 150px;
        .empty-img {
            width: 400px;
            height: 300px;
            margin: 0 auto;
            background-image: url(//cdn.zsdx.cn/wei/images/hire/manage/market/empty-good-list.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .empty-text {
            text-align: center;
            margin-top: 40px;
        }
    }
</style>